<template>
  <div class="collocationitem">
    <div class="colls-name">
      {{ collocation[0].fmtitle }}
    </div>
    <div class="colls-time">{{ collocation[0].fmDate }}</div>
    <div class="colls-line"></div>
    <div>
      <div>访问量 : {{ collocation[0].fmVisits }}</div>
    </div>

    <div>
      <img :src="collocation[0].fmImg" alt="" />
    </div>

    <div v-html="collocation[0].fmContent"></div>

    <div class="coll-bottom">
      <div>
        <a :href="vcollhref + fmids2">上一个 : {{ xia }}</a>
      </div>

      <div>
        <a :href="vcollhref + fmids">下一个 : {{ shang }}</a>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request";

export default {
  components: {},
  name: "CollocationItem",
  data() {
    return {
      love: false,
      collocation: "",
      shang: "",
      xia: "",
      fmids: "",
      fmids2: "",
      vcollhref: "vcollocationitem?fmId=",
    };
  },
  created() {
    request({
      url: "/foodmatching/queryFoodMatchinginformation",
      params: {
        fmId: this.$route.query.fmId,
      },
    })
      .then((res) => {
        this.collocation = res.data.data;
        console.log(res.data.data);
      })
      .catch((err) => {
        console.log(err);
      });

    request({
      url: "/foodmatching/addFoodMatchingVisits",
      params: {
        fmId: this.$route.query.fmId,
      },
    })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });

    request({
      url: "/foodmatching/queryNextPage",
      params: {
        fmId: this.$route.query.fmId,
      },
    })
      .then((res) => {
        if (res.data.code == 500) {
          this.shang = "无";
        } else {
          this.shang = res.data.data.fmTitle;
          this.fmids = res.data.data.fmId;
        }
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });

    request({
      url: "/foodmatching/querylastPage",
      params: {
        fmId: this.$route.query.fmId,
      },
    })
      .then((res) => {
        if (res.data.code == 500) {
          this.xia = "无";
        } else {
          this.xia = res.data.data.fmTitle;
          this.fmids2 = res.data.data.fmId;
        }
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {},
};
</script>

<style>
.collocationitem {
  margin: 0 auto;
  width: 80%;
}

.sss {
  font-size: 0.1rem;
}

.colls-name {
  font-size: 0.15rem;
  margin-top: 0.7rem;
  text-align: center;
}

.colls-time {
  text-align: center;
  font-size: 0.1rem;
  margin-top: 0.15rem;
}

.colls-line {
  width: 80%;
  margin: 0 auto;
  height: 1px;
  margin-top: 0.15rem;
  background-color: black;
}

.collocationitem :nth-child(4) {
  width: 80%;
  margin: 0 auto;
  font-size: 0.1rem;
  margin-top: 0.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.collocationitem :nth-child(4) img {
  font-size: 0.1rem;
  width: 0.4rem;
}

.collocationitem :nth-child(4) img:hover {
  font-size: 0.1em;
  cursor: pointer;
}

.collocationitem :nth-child(5) {
  width: 80%;
  margin: 0 auto;
  margin-top: 0.15rem;
}

.collocationitem :nth-child(5) img {
  width: 100%;
  height: 3rem;
}

.collocationitem :nth-child(6) {
  width: 80%;
  margin: 0 auto;
  font-size: 0.1rem;
  margin-top: 0.1rem;
}

.collocationitem :nth-child(7) {
  width: 80%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  font-size: 0.08rem;
  margin-top: 0.6rem;
  margin-bottom: 0.3rem;
}

.coll-bottom div a {
  text-decoration: none;
  color: #000;
}

.coll-bottom a:hover {
  color: rgb(123, 176, 226);
}
</style>